<template>
  <div class="doctor-container">
    <Header />
    <div class="doctor-content">
      <h2>心理咨询</h2>
      
      <!-- 筛选部分 -->
      <div class="filter-wrapper">
        <div class="filter-section">
          <el-card class="filter-card">
            <el-form :model="filterForm" inline>
              <el-form-item label="姓名">
                <el-input v-model="filterForm.name" placeholder="请输入医生姓名" />
              </el-form-item>
              <el-form-item label="性别">
                <el-select v-model="filterForm.sex" placeholder="请选择性别">
                  <el-option label="全部" value="" />
                  <el-option label="男" :value="1" />
                  <el-option label="女" :value="0" />
                </el-select>
              </el-form-item>
              <el-form-item label="擅长方向">
                <el-select v-model="filterForm.direction" placeholder="请选择方向">
                  <el-option label="全部" value="" />
                  <el-option 
                    v-for="option in classificationOptions" 
                    :key="option.value" 
                    :label="option.label" 
                    :value="option.value" 
                  />
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="handleFilter">
                  <el-icon><Search /></el-icon>
                  筛选
                </el-button>
              </el-form-item>
            </el-form>
          </el-card>
        </div>
      </div>

      <!-- 医生列表 -->
      <div class="doctor-list" v-loading="loading">
        <div v-if="doctors.length === 0" class="empty-tip">
          暂无咨询师信息
        </div>
        <el-row :gutter="20" v-else>
          <el-col 
            v-for="doctor in doctors" 
            :key="doctor.doctorId" 
            :span="24"
          >
            <el-card class="doctor-card" shadow="hover" @click="viewDetail(doctor)">
              <div class="doctor-info">
                <div class="doctor-header">
                  <h3 class="doctor-name">{{ doctor.name }}</h3>
                  <div class="doctor-meta">
                    <span class="qualification">
                      <el-icon><Trophy /></el-icon>
                      {{ doctor.qualification }}
                    </span>
                    <span class="specialization">
                      <el-icon><Star /></el-icon>
                      {{ doctor.skill }}
                    </span>
                  </div>
                </div>
                <p class="doctor-introduction">{{ doctor.introduction }}</p>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <!-- 分页 -->
      <div class="pagination" v-if="total > 0">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :total="total"
          :page-size="6"
          layout="total, prev, pager, next"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <Footer />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { Trophy, Star, Search } from '@element-plus/icons-vue'
import Header from '../../components/header.vue'
import Footer from '../../components/footer.vue'
import { getAllDoctors, filterDoctors } from '../../api/doctorMsg'

interface Doctor {
  doctorId: number
  name: string
  sex: number
  qualification: string
  skill: string
  introduction: string
}

const router = useRouter()
const loading = ref(false)
const doctors = ref<Doctor[]>([])
const total = ref(0)
const currentPage = ref(1)
const pageSize = ref(6)

const filterForm = ref({
  name: '',
  sex: '',
  direction: ''
})

// 获取咨询师列表
const fetchDoctors = async () => {
  loading.value = true
  try {
    const res = await getAllDoctors()
    console.log('API Response:', res) // 添加调试日志
    if (res.code === '200') {
      doctors.value = res.data.list || []
      total.value = res.data.total || 0
      console.log('Doctors:', doctors.value) // 添加调试日志
    } else {
      ElMessage.error(res.msg || '获取咨询师列表失败')
    }
  } catch (error) {
    console.error('获取咨询师列表失败:', error)
    ElMessage.error('获取咨询师列表失败')
  } finally {
    loading.value = false
  }
}

// 处理筛选
const handleFilter = async () => {
  loading.value = true
  try {
    const params = {
      name: filterForm.value.name || undefined,
      sex: filterForm.value.sex || undefined,
      skill: filterForm.value.direction || undefined
    }
    const res = await filterDoctors(params)
    if (res.code === '200') {
      doctors.value = res.data.list || []
      total.value = res.data.total || 0
    }
  } catch (error) {
    console.error('筛选失败:', error)
    ElMessage.error('筛选失败')
  } finally {
    loading.value = false
  }
}

// 查看咨询师详情
const viewDetail = (doctor: Doctor) => {
  router.push(`/doctor/${doctor.doctorId}`)
}

// 处理分页
const handleCurrentChange = (val: number) => {
  currentPage.value = val
  fetchDoctors()
}

onMounted(() => {
  fetchDoctors()
})
</script>

<style scoped>
/* 复用 announcement.vue 的样式结构，修改相关类名 */
.doctor-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f7fa;
}

.doctor-content {
  flex: 1;
  width: 800px;
  margin: 84px auto 40px;
  padding: 0 20px;
}

.doctor-content h2 {
  margin-bottom: 30px;
  color: #2c3e50;
  text-align: center;
}

.filter-wrapper {
  width: 800px; /* 已设置为800px */
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.filter-section {
  width: 800px; /* 已设置为800px */
}

.filter-card {
  width: 800px; /* 已设置为800px */
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.doctor-list {
  margin-top: 50px;
}

.doctor-card {
  width: 800px;
  margin-bottom: 80px;
  transition: transform 0.3s;
  cursor: pointer;
  border-radius: 8px;
  background-color: #fff;
}

.doctor-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.doctor-info {
  padding: 20px;
}

.doctor-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 15px;
}

.doctor-name {
  margin: 0;
  color: #2c3e50;
  font-size: 18px;
  font-weight: bold;
}

.doctor-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  color: #909399;
  font-size: 13px;
  min-width: 200px; /* 确保元数据区域有足够宽度 */
}

.qualification,
.specialization {
  display: flex;
  align-items: center;
  gap: 4px;
}

.doctor-introduction {
  color: #666;
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}

.pagination {
  margin-top: 40px;
  display: flex;
  justify-content: center;
}

:deep(.el-pagination) {
  padding: 20px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  min-width: 400px;
}

.empty-tip {
  text-align: center;
  padding: 40px;
  color: #909399;
  font-size: 16px;
}
</style> 